<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="switch-time">
            <span class="label-time">切换日期</span>
            <el-date-picker v-model="date" :editable='false' :clearable='false' type="month" placeholder="请选择"></el-date-picker>
            <el-button type="primary" class="btn-switch" @click="switchMonth">切换</el-button>
        </div>
        <div class="total-sales">
            <div class="sales-title">
                <span class="tip"></span>
                <span class="current-time">{{currentMonth}}</span>
                <span>销售总额</span>
            </div>
            <div class="current-month">
                <div class="current-item">
                    <div class="title">当月订单量（条）</div>
                    <div class="data">{{num}}</div> 
                </div>
                <div class="current-item">
                    <div class="title">当月销售总额（元）</div>
                    <div class="data">{{money}}</div> 
                </div>
            </div>
        </div>
        <div class="table-list">
            <div class="sales-title">
                <span class="tip"></span>
                <span>30天销售详细</span>
            </div>
            <!-- <TableLayoutes form-title="" class="table-content">   -->
            <div class="table-title" >
                
            </div> 
            <el-table :data="tableData" border style="width: 100%" v-loading='loading'>                     
                <el-table-column label="服务名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sIncrementName | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="30天订单量（条）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.totalNum | isNull}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="30天销售额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.totalMoney | isNull}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- </TableLayoutes> -->
        </div>
        <div class="table-list">
            <div class="sales-title">
                <span class="tip"></span>
                <span>班级统计</span>
            </div>
            <!-- <TableLayoutes form-title="">   -->
                <div class="table-title">
                    <!-- <span class="table-title-span"></span> -->
                </div> 
                <el-table :data="classData"  style="width: 100%" v-loading='loadingClass' @expand='expandChange'>    
                    <el-table-column type="expand" >
                        <template scope="scope">
                            <child-table :scope="scope" :childData='childData'></child-table>
                        </template>
                    </el-table-column>
                    <el-table-column label="班级名称">
                        <template scope="scope">
                            <span>{{scope.row.sClassName | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单总量（条）">
                        <template scope="scope">
                            <span>{{scope.row.totalNum | isNull}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="总销售额（元）">
                        <template scope="scope">
                            <span>{{scope.row.totalMoney | isNull}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageQuery.total"
                        :current-page.sync="pageQuery.currentpage"
                        :page-sizes="config.pageSizes"
                        :page-size="config.pageSize"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            <!-- </TableLayoutes> -->
        </div>
    </div>
</template>

<script>
import moment from 'moment';
import Levelbar from '../layout/Levelbar';
import TableLayoutes from 'components/TableLayoutes';
import childTable from './comps/childTable';
import { getSchoolStatistics, listSchoolStatistics } from 'api/serviceManage';
import { mapState, mapActions, mapGetters } from 'vuex';
export default{
    name: 'orderStatistics',
    components: {Levelbar, TableLayoutes, childTable},
    data() {
        return {
            childData: {
                date: ''
            },
            num: '',
            money: '',
            loading: true,
            loadingClass: true,
            date: new Date(),
            currentMonth: moment(new Date()).format('YYYY年MM月'),
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            tableData: [],
            classData: []
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        }),
        ...mapGetters([
            'schoolId',
            'schoolName',
            'schoolList'
        ])
    },
    created() {
        this.getTableData();
        this.getClassTableData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.getClassTableData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.getClassTableData();
        },
        getTableData() {
            
            let fSchoolId = this.schoolId;
            let date = this.date!=''?moment(this.date).format('YYYY-MM'):'';  
            getSchoolStatistics(fSchoolId, date).then(res => {
                this.loading = false;
                this.tableData = res.data.content.list;
                this.num = res.data.content.num;
                this.money = res.data.content.money;
            }).catch(() => {
                this.loading = false;
            });
        },
        getClassTableData() {

            let fSchoolId = this.schoolId;
            let date = this.date!=''?moment(this.date).format('YYYY-MM'):'';
            listSchoolStatistics(this.pageQuery.currentpage, this.config.pageSize, fSchoolId, date).then(response => {
                this.loadingClass = false;
                this.classData = [];
                if (response.data.content) {
                    this.classData = response.data.content.list;
                    this.pageQuery.total = response.data.content.pagination.total;
                }
            }).catch(() => {
                this.loadingClass = false;
            });
        },
        expandChange(row, expandedRows) {
            if (expandedRows) {
                this.childData.date = this.date!=''?moment(this.date).format('YYYY-MM'):'';
            }
        },
        switchMonth() {
            this.currentMonth = moment(this.date).format('YYYY年MM月');
            this.getTableData();
            this.getClassTableData();
        }
    }
}
</script>
<style lang="scss">
    .app-container {
        position: relative;
        padding: 20px 20px 10px;
        $bgcolor: #fff;
        @mixin box-item() {
            overflow: hidden;
            background: $bgcolor;
            box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
            color: #333;
            font-size: 14px;
            padding: 20px 20px;
        }   
        @mixin tip-css {
            display:inline-block;
            height: 12px;
            width: 6px;
            border-left: 3px solid #ff5e2c;
            padding-left: 15px;
        }
        .switch-time {
            @include box-item();
            .label-time {
                padding-right: 6px;
            }
            .label-distance {
                padding-left: 20px;
            }
            .btn-switch {
                float: right;
            }
        }
        .total-sales {
            @include box-item();
            margin-top: 15px;
            .sales-title {
                .tip {
                    @include tip-css();
                }
                .current-time {
                    padding-right: 8px;
                }
            }
            .current-month {
                display: flex;
                justify-content: space-around;
                padding: 40px;
                .current-item {
                    .title {
                        font-size: 16px;
                        color: #aaa;
                        width: 50px;
                        padding-bottom: 30px;
                        width: 160px;
                        text-align: center;
                    }
                    .data {
                        font-size: 26px;
                        color: #333;
                        text-align: center;
                        width: 160px;
                    }
                }
            }
        }
        .table-list {
            @include box-item();
            margin-top: 15px;
            .sales-title {
                .tip {
                    @include tip-css();
                }
            }
            .table-title{
                padding: 13px 0;
            }
            .pagination-container{
                text-align: right;
            }
            .table-content {
                .table-box {
                    padding-bottom: 0px;
                }
            } 
        }
    }
</style>                     